<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="action"
      list-type="picture-card"
      :auto-upload="false"
      :file-list="fileList"
      :show-file-list="false"
      :on-change="handleChange"
      :accept="filetype"
    >
      <div
        v-if="fileList.length != 0"
        style="width: 100%; height: 100%"
        slot="file"
        slot-scope="{ file }"
      >
      <img  :src="file.url" class="avatar" />
      </div>
      <i v-else  class="el-icon-plus avatar-uploader-icon"></i>
      
      <!-- :on-change="handleChange" -->
    </el-upload>
  </div>
</template>
<script>
import { upload } from "@/api/request.js";
export default {
  props: {
    // 默认文件
    fileArray: {
      type: Array,
      default: () => [],
    },
    timestamp: {
      type: String,
      default: "",
    },
  },
  watch: {

    fileArray: {
      handler(newVal) {
        // console.log(newVal);
        if (newVal) {
          this.fileList = this.fileArray;
          // console.log(this.dialogPdf);
        }
      },
      immediate: true,
    },
    timestamp: {
      handler(newVal) {
        // console.log(newVal);
        if (newVal) {
          this.folderid = newVal;
          // console.log(this.dialogPdf);
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      imageUrl: "",
      enclosureImg: [],
      fileList: [], //文件列表
      fileList1:[],
      recordfiles: [], //删除文件id集合
      userInfo: {},
      filetype:
        ".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP,.jfif,.jpe",
    };
  },

  methods: {
    handleAvatarSuccess(res, file) {
      console.log(1111, res, file);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file, 858585);
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleChange(res) {
      this.userInfo = JSON.parse(sessionStorage.getItem("monitorBack-userInfo"));
console.log('folderid',this.folderid);
      // this.attachmentDetails.push(res);
      // console.log(res.raw);
      this.enclosureImg = new FormData(); //new一个formData事件
      this.enclosureImg.append("file", res.raw); //将file属性添加到formData里
      this.enclosureImg.append("folderid", this.folderid); //将file属性添加到formData里
      this.enclosureImg.append("userId", this.userInfo.userId); //将file属性添加到formData里
      this.enclosureImg.append("userName", this.userInfo.realName); //将file属性添加到formData里

      upload(this.enclosureImg).then((i) => {
        // console.log(i);
        i[0]["name"] = res.name;
        i[0]["url"] = res.url;
        this.fileList=i[0]
        console.log(6666,this.fileList);
        // this.fileList=[res.url]
        this.fileList1.push(i[0]);
      });

      this.$emit("upFileList", this.fileList1);
      // console.log(this.fileList);
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
    width: 150px !important ;
  height: 150px !important;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  width: 150px !important ;
  height: 150px !important;
  line-height: 150px !important;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
